<template>
  <div id="app">
    <router-view />
    <div id="drag" @touchmove="move" v-if="flag" @click="toCustmoer">
      <img src="./assets/44信封.png" alt="">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true
    }
  },
  created() {

  },
  methods: {
    move(e) {
      e.preventDefault();
      var x = e.touches[0].clientX
      var y = e.touches[0].clientY

      if (x > 25 && x< document.body.clientWidth - 25 && y > 25 && y< document.body.clientHeight - 80) {
        var drag = document.getElementById('drag')
        drag.style.top = y - 25 + "px"
        drag.style.left = x - 25 + "px"
      }
    },
    // 跳转
    toCustmoer() {
      this.$router.push("/custmoer");
    },
  },
  watch: {
    $route(n) {
      if (n.path == "/custmoer") {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
}
</script>
<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  background-color: #f2f3f5;
}

* {
  margin: 0;
  padding: 0;
}

#drag {
  width: 50px;
  height: 50px;
  background-color: #007aff;
  border-radius: 50%;
  position: fixed;
  right: 0;
  bottom: 50px;
  img{
    width: 80%;
    height: 80%;
    margin-top: 5px;
    margin-left: 5px;

  }
}
</style>
